<template>
  <view class="main_box">
    <custom-navbar :immersive="true" title="修改密码" color="#333"> </custom-navbar>
    <view :style="{ paddingTop: `${navbarHeight}px` }"></view>
    <view class="main_box-content">
      <!-- <view class="main_box-content-title"> 修改密码 </view> -->

      <view class="main_box-content-form">
        <input placeholder="原密码" password v-model="formData.oldPassword" />
        <input placeholder="新的密码" password v-model="formData.newPassword" />
        <input placeholder="确认密码" password v-model="newConfirmPassword" />
      </view>
      <view class="main_box-content-submit_btn" @click="changePassWord"> 更改密码 </view>
    </view>
  </view>
</template>

<script>
import { getToken, setToken, setUserInfo } from '@/service/auth.js'
import navbarMixin from '@/mxins/navbar.js'
import { updatePassword } from '@/service/api/home.js'
import { encrypt } from '@/utils/func.js'

export default {
  components: {},
  mixins: [navbarMixin],
  data() {
    return {
      formData: {
        newPassword: '',
        oldPassword: '',
      },
      newConfirmPassword: '',
    }
  },
  watch: {},
  created() {
    uni.getSystemInfo({
      success: function (res) {
        console.log('info=' + JSON.stringify(res))
      },
    })
    // this.formData.oldPassword = uni.getStorageSync('userPassward')
  },
  onLoad(option) {},
  methods: {
    async changePassWord() {
      //密码与确认密码
      let _that = this
      if (!_that.formData.oldPassword) return this.uniShowToast('请输入原密码')
      if (!_that.formData.newPassword) return this.uniShowToast('请输入新密码')
      if (!_that.newConfirmPassword) return this.uniShowToast('请输入确认密码')
      // if (_that.formData.newPassword.length<6||_that.formData.newPassword.length>16) return this.uniShowToast('请输入6至16位密码')

      if (_that.formData.newPassword != _that.newConfirmPassword) {
        return this.uniShowToast('新密码与确认密码不一致')
      }

      console.log('pass=' + _that.formData)
      _that.uniShowLoading()
      const res = await updatePassword(_that.formData).catch(err => {
        console.log('err=' + JSON.stringify(err))
        if (err.status !== 200) {
          _that.uniHideLoading()
          _that.uniShowToast(err.msg)
        }
      })
      this.uniHideLoading()

      if (res.status == 200) {
        console.log('修改成功')
        _that.uniShowToast('修改成功')
        uni.reLaunch({
          url: '/pages/login/index',
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.main_box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #edfff1 1%, #f6f6f6 18%);
  align-items: center;

  &-content {
    width: 650rpx;
    &-title {
      margin-top: 30rpx;
      font-size: 60rpx;
      height: 100rpx;
      color: #333333;
    }
    &-tip {
      font-size: 28rpx;
      color: #333333;
      font-weight: lighter;
    }
    &-form {
      margin-top: 50rpx;
      input {
        background: white;
        height: 90rpx;
        width: 100%;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        padding-left: 30rpx;
      }
    }

    &-submit_btn {
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;

      height: 90rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
